<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{path:'/dashBook'}">首页</el-breadcrumb-item>
  <el-breadcrumb-item >学员信息管理父级菜单</el-breadcrumb-item>
  <el-breadcrumb-item >学员管理</el-breadcrumb-item>
</el-breadcrumb>

  <el-card style="margin-top: 10px;">
    <el-form :inline="true" :model="queryMap" label-width="100px;" size="small" style="margin:12px 0;">
    <!--  学员名称-->
      <el-form-item label="学员名称">
        <el-input type="text" v-model="queryMap.studentName" placeholder="请输入要查询的姓名"
        @keyup.enter.native="getStudentList" clearable @clear="getStudentList"></el-input>
      </el-form-item>
<!-- 联系方式:电话号码     -->
      <el-form-item label="联系方式">
        <el-input v-model="queryMap.studentPhone" placeholder="请输入要查询的电话号码"
                  @keyup.enter.native="getStudentList" clearable @clear="getStudentList"></el-input>
      </el-form-item>
      <el-form-item label="学员状态">
        <el-select v-model="queryMap.studentStatus" clearable @clear="getStudentList"
                   placeholder="请选择要查询的状态" @visible-change="getStudentList">
          <el-option label="未报名" value="0"></el-option>
          <el-option label="在读" value="1"></el-option>
          <el-option label="退学" value="2"></el-option>
          <el-option label="休学" value="3"></el-option>
          <el-option label="开除" value="4"></el-option>
          <el-option label="自主就业" value="5"></el-option>
          <el-option label="已毕业" value="6"></el-option>
        </el-select>
      </el-form-item>
      <!--按钮区域-->
      <el-form-item>
        <el-button type="success" @click="getStudentList" icon="el-icon-search">查询</el-button>
        <el-button @click="resetForm" icon="el-icon-refresh" type="info" plain>重置</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showStudentDialog">添加学员信息</el-button>
        <el-button type="info" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="studentList" border stripe style="width: 100%;">
      <el-table-column label="学生编号" prop="studentId" width="90"></el-table-column>
      <el-table-column label="学生姓名" prop="studentName" width="80"></el-table-column>
      <el-table-column label="性别" prop="studentGender" width="60">
        <el-table-column>
          <template slot-scope="scope">
            <span>{{scope.row.studentGender === '0' ? "男":"女"}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属班级" prop="className" width="100"></el-table-column>
        <el-table-column label="出生日期" prop="brithday" width="120"></el-table-column>
        <el-table-column label="联系方式" prop="studentPhone" width="130"></el-table-column>
        <el-table-column label="QQ号码" prop="qqAccount" width="110"></el-table-column>
        <el-table-column label="联系地址" prop="studnetAddress" width="160"></el-table-column>
        <el-table-column label="微信号" prop="wechatAaccout" width="100"></el-table-column>
        <el-table-column label="邮箱" prop="email" width="120"></el-table-column>
        <el-table-column label="账号状态" prop="studentStatus" >
          <template slot-scope="scope">
            <span>{{changeStatus(scope.row.studenStatus)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteStudenById(scope.row.studentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 10px;"
      background
      @size-change="chanagePgeSize"
      @current-change="changePageNum"
      :current-page="queryMap.pageNum"
      :page-size="queryMap.pageSize"
      :page-sizes="[5,10,20,30]"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
      >
    </el-pagination>
    <el-dialog :title="addOrUpdateStu" :visible.sync="addOrUpdateVisible" @close="cancelForm" width="60%">
      <span>
        <el-form :model="addForm" :label-position="labelPasition" :rules="addFormRlues" ref="addForm">
          <el-row>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="学员姓名" prop="studentName">
                  <el-input type="text" v-model="addForm.studentName"
                            placeholder="请填写学员姓名" style="width: 400px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="grid-content bg-purple-light">
                <el-form-item label="性别" prop="studentGender">
                  <el-radio-group v-model="addForm.studentGender">
                    <el-radio label="0" :value="0">男</el-radio>
                    <el-radio label="1" :value="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="联系电话" prop="studentPhone">
                  <el-input v-model="addForm.studentPhone" placeholder="请输入电话号码" style="width: 400px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="年龄">
                  <el-input v-model="addForm.studentAge" placeholder="请输入年龄" style="width: 400px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="QQ号码">
                  <el-input v-model="addForm.qqAccount" placeholder="请输入QQ号码" style="width: 400px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="微信号码">
                  <el-input v-model="addForm.wechatAaccout" placeholder="请输入微信号码" style="width: 400px"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="身份证号码" prop="studentCard">
                  <el-input v-model="addForm.studentCard"
                            placeholder="请输入身份证号码" style="width: 380px"></el-input>
                </el-form-item>
                </div>
            </el-col>

              <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="学员状态">
                  <el-select v-model="addForm.studentStatus" style="width: 400px">
                    <el-option label="未报名" value="0"></el-option>
                    <el-option label="在读" value="1"></el-option>
                    <el-option label="退学" value="2"></el-option>
                    <el-option label="休学" value="3"></el-option>
                    <el-option label="开除" value="4"></el-option>
                    <el-option label="自主就业" value="5"></el-option>
                    <el-option label="已毕业" value="6"></el-option>
                  </el-select>
                </el-form-item>
                </div>
            </el-col>
          </el-row>

<!--          第五行-->
          <el-row>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                 <el-form-item label="出生日期">
                   <el-col :span="12">
                     <el-date-picker type="date" value-format="yyyy-mm-dd"
                                     placeholder="请选择出生日期" v-model="addForm.brithday" style="width: 200px;">

                     </el-date-picker>
                   </el-col>
                 </el-form-item>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="grid-content bg-purple">
                <el-form-item label="入学时间">
                   <el-col :span="12">
                     <el-date-picker type="date" value-format="yyyy-mm-dd"
                                     placeholder="请选择出生日期" v-model="addForm.enrolTime" style="width: 200px;">
                     </el-date-picker>
                   </el-col>
                 </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="cancelForm">取消</el-button>
        <el-button type="success" @click="saveStudentInfo" round>保存</el-button>
      </span>
    </el-dialog>

  </el-card>
</div>
</template>

<script>
export default {
  name: 'StuManage',
  data () {
    const checkPhone = (rule, value, callback) => {
      const phoneRules = /^1[3456789]\d{9}$$/
      if (!value) {
        return callback(new Error('联系电话不能为空'))
      }
      if (!Number.isInteger(+value)) {
        return callback(new Error('请输入数值的手机号码'))
      } else {
        if (!phoneRules.test(value)) {
          return callback(new Error('您输入的手机号码格式不对'))
        }
        return callback() // 校验通过直接返回
      }
    }
    const checkStudentCard = (rule, value, callback) => {
      const cardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!value) {
        return callback(new Error('身份证号码不能为空'))
      }
      if (cardReg.test(value)) {
        return callback()
      } else {
        return callback(new Error('身份证号码格式不对，请重新输入!'))
      }
    }
    return {
      addFormRlues: {
        studentName: [
          { required: true, message: '请输入学员姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入长度为2-10个字符的名字', trigger: 'blur' }
        ],
        studentGender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        studentPhone: [
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        studentCard: [
          { required: true, validator: checkStudentCard, trigger: 'blur' }
        ]
      },
      addForm: {
        studentName: '',
        studentGender: '',
        studentPhone: '',
        studentAge: '',
        qqAccount: '',
        wechatAaccout: '',
        studentCard: '',
        studentStatus: '',
        brithday: '',
        enrolTime: ''
      },
      addOrUpdateStu: '新增学员信息',
      addOrUpdateVisible: false,
      labelPasition: 'right',
      total: 0,
      studentList: [],
      queryMap: {
        pageNum: 1,
        pageSize: 5,
        studentName: '',
        studentPhone: '',
        studentStatus: ''
      }
    }
  },
  mounted () {
    // 当页面挂载扫浏览器进行渲染，改函数被加载
    this.getStudentList();
  },
  methods: {
    showEditDialog(student){
      // 1.对话框的标题需要修改，
      this.addOrUpdateStu = '修改学员信息'
      this.addOrUpdateVisible = true;
      // this.addForm = student // 直接将行记录传过来赋值给from表单绑定的对象addFrom(这种方式在企业开发不采用，这是一种bug)
      this.$http.get('student/edit/'+student.studentId).then(res =>{
        if(res.data.success){
          this.addForm = res.data.data;
          // this.addForm.studenStatus = res.data.studentStatus + ''
          this.addForm.studentStatus = (res.data.data.studentStatus).toString();
          this.getStudentList()
        }else {
          this.$message.error("该学员查无此数据",res.data.errorMsg)
          this.addOrUpdateVisible = false
          this.getStudentList()
        }
      })
    },
    // 点击取消按钮
    cancelForm () {
      this.$refs['addForm'].clearValidate();
      this.addForm = {}
      this.addOrUpdateVisible = false;
    },
    saveStudentInfo () {
      // 点击保存去校验输入框或者下拉框,文本域等等是否输入了值
      this.$refs['addForm'].validate((valid) => {
        if (valid) { // valid为true   条件成立:输入框或者下拉框,文本域输入满足条件的值
          if(!this.addForm.studentId){
            this.addStudent()
          }else {
            this.updateStudent()
          }
        } else {
          this.$message.error('必填项不能为空,请重新输入!')
        }
      })
    },
    addStudent(){
      this.$http.post('student/add', this.addForm).then(res => {
        if (!res.data.success) { // 保存成功
          this.$message.error('保存学员信息失败',res.data.errorMsg)
        }
        this.addOrUpdateVisible = false
        this.getStudentList()
      })
    },
    updateStudent(){
      this.$http.put('student/update/'+this.addForm.studentId,this.addForm).then(res =>{
        if(res.data.success){
          // 1.提示信息
          this.$notify({
            title:"操作成功",
            message:"学员信息已更新",
            type:'success'
          })
          this.addForm = {}
          this.getStudentList()
        }else {
          this.$notify({
            title:"操作失败",
            message:"学员信息修改失败" +res.data.errorMsg,
            type:'error'
          })
        }
        this.addOrUpdateVisible = false
      })
    },
    showStudentDialog () {
      // 1.清除历史记录
      this.addForm = {}

      this.addOrUpdateVisible = true
    },
    async deleteStudenById (studentId) {
      if (studentId) {
        const conf = await this.$confirm('您确定要删除此数据吗?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '已取消此操作'
          })
        })

        if (conf === 'confirm') {
          const { data: res } = await this.$http.delete('student/delete' + studentId)
          console.log(res)
          if (res.success) {
            this.$message.success('数据删除成功')
          } else {
            this.$message.error(res.data.errorMsg)
          }
        }
      }
    },
    resetForm () {
      this.queryMap.studentName = ''
      this.queryMap.studentPhone = ''
      this.queryMap.studentStatus = ''
    },
    changePageNum (newPageNum) {
      this.queryMap.pageNum = newPageNum
      this.getStudentList()
    },
    chanagePgeSize (newSize) {
      this.queryMap.pageSize = newSize
      this.getStudentList()
    },
    async getStudentList () {
      const { data: res } = await this.$http.get('student/findList', { params: this.queryMap })
      console.log('获取学员集合数据', res)
      if (res.success) {
        this.studentList = res.data.rows
        this.total = res.data.total
      } else {
        this.$message.error('查无此数据!')
      }
    },
    changeStatus (studentStatus) {
      let statusInfo = ''
      if (studentStatus === '0') {
        return statusInfo = '未报名'
      } else if (studentStatus === 1) {
        return statusInfo = '在读'
      } else if (studentStatus === 2) {
        return statusInfo = '退学'
      } else if (studentStatus === 3) {
        return statusInfo = '休学'
      } else if (studentStatus === 4) {
        return statusInfo = '开除'
      } else if (studentStatus === 5) {
        return statusInfo = '自主就业'
      } else {
        return statusInfo = '已毕业'
      }
    }

  }
}
</script>

<style scoped>

</style>
